<template>
  <div class="Fnav">
    <el-row class="tac">
      <el-col class="content-left" :class="{reduce: isCollapse}">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          id="body-left" style="display: block" index="1">
          <div class="h3"><i class="el-icon-s-grid h3-i" @click="isReduce"></i></div>
          <el-menu-item index="1" class="menu">
            <i class="el-icon-location"></i>
            <span slot="title">菜单1.1</span>
          </el-menu-item>
          <el-menu-item index="2" class="menu">
            <i class="el-icon-menu"></i>
            <span slot="title">菜单1.2</span>
          </el-menu-item>
          <el-menu-item index="3" class="menu">
            <i class="el-icon-document"></i>
            <span slot="title">菜单1.3</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col class="content-right" :class="{boost: isCollapse}">
        <div class="top"><el-button round class="top-btn" style="color: #009fe8 ; font-size: 10px">主地图</el-button></div>  
        <rightnav class="rightnav"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Rightnav from 'components/Rightnav'

export default {
  name: 'Fnav',
  data () {
    return {
      isCollapse: false
    }
  },
  components: {
    Rightnav
  },
  methods: {
    isReduce() {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style scoped>
.Fnav {
  position: relative;
  width: 100%;
  height: 100%;
}
.content-left {
  width: 15%;
  height: 100%;
}
.content-right {
  width: 85%;
  height: 100%;
}
.h3 {
  height: 34px;
  line-height: 34px;
  padding: 0 0;
  width: 100%;
  text-align: center;
  background-color: #0080cb;
}
.h3-i {
  cursor: pointer;
}
.top {
  height: 100%;
  width: 100%;
  background-color: #009fe8;
}
.rightnav {
  width: 100%;
  height: 800px;
}
.top-btn {
  padding: 6px 6px;
  margin: 4px;
}
.reduce {
  width: 4%;
  height: 100%;
}
.boost {
  width: 96%;
  height: 100%;
}
.menu {
  text-align: center;
}
.el-menu-item.is-active {
  border-radius: 0 30px 0 30px;
  color: #fff;
  background-color: #009fe8;
}
/* .content-left .el-menu--collapse {
    width: 77px;
} */
</style>